<template>
    <Card>
        <!--条件查询-->
        <Row>
            <Form :model="filters" ref="filters" label-position="right" :label-width="90" inline>
                <FormItem label="小区">
                    <div class="filters-input">
                        <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                            <el-option v-for="item in houseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                        </el-select>
                    </div>
                </FormItem>
            </Form>
        </Row>
        <!--数据展示-->
        <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
            <template slot="empty">暂无数据</template>
            <el-table-column prop="deviceCode" label="设备编码"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
            <el-table-column prop="deviceType" label="设备类型"></el-table-column>
            <el-table-column prop="deviceLocation" label="设备位置"></el-table-column>
            <el-table-column prop="status" label="巡视状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.status==1" style="color: red">未巡视</p>
                    <p v-if="scope.row.status==2" style="color: green">已巡视</p>
                </template>
            </el-table-column>
            <el-table-column prop="inspectingOfficerName" label="巡检人员"></el-table-column>
            <el-table-column prop="inspectingTime" label="巡检时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="showDetails(scope.row.id)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
              show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
        </Page>

        <Modal v-model="detailsVisible">
            <GenerateFormView :data="jsonData" :value="values">

            </GenerateFormView>
        </Modal>
    </Card>
</template>

<script>
    import GenerateFormView from "@/view/components/form-maker/GenerateFormView"

    export default {
        components:{
            GenerateFormView
        },
        data(){
            return{
                pageNum:1,
                pageSize:10,
                pageTotal:0,
                tableLoading:false,
                detailsVisible:false,

                filters:{
                    housingId:"",
                },
                jsonData: {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'top'
                    },
                },
                values: {},

                houseList:[],
                tableData:[],
            }
        },

        created:function(){
            this.gethouseList();
        },

        methods:{
            //获取小区
            gethouseList: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(resp => {
                    this.houseList = resp;
                    this.filters.housingId = resp[0].id;
                    this.housechange();
                });
            },
            housechange:function(){
                this.loadData();
            },
            loadData:function () {
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/record/patrolRecords",this.filters).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            showDetails:function(id){
                this.getRequest("/api/record/details?id="+id).then(resp=>{
                    if (resp.code==20000){
                        this.jsonData=JSON.parse(resp.data.routingContent);
                        this.values=JSON.parse(resp.data.formContent);
                        this.detailsVisible=true;
                    }
                });
            },
            handlePage:function () {
                
            },
            handlePageSize:function () {

            }
        },
    }
</script>
